<script setup>
import { ref } from 'vue'

const count = ref(0)

const name = ref('Vue.js')

function greet(event){
    alert(`Hello ${name.value}!`)
    if(event){
        alert(event.target.tagName)
    }
}


function say(message){
    alert(message)
}

function warn(message,event){
    // 这里可以访问原生事件
    if(event){
        event.preventDefault()
    }
    alert(message)
}
function submit(event){
    if(event){
        alert(event.target.tagName)
    }
}

function onPageDown(event){
    if(event){
        alert(event.target.tagName)
    }
}

function clear(event){
    if(event){
        alert(event.target.tagName)
    }
}
function doSomething(event) {
    if(event){
        alert(event.target.tagName)
    }
}
</script>

<template>
<button @click="count++">Add 1</button>
<p>Count is:{{ count }}</p>

<button @click="greet">Greet</button>

<hr>
<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>
<hr>
<!-- 使用特殊的$event变量 -->
<button @click="warn('From cannot be submitted yet.',$event)">
    Submit
</button>
<!-- 使用内联箭头函数 -->
<button @click="() => warn('From cannot be submitted yet.',event)">
    Submit
</button>

<hr>
<input @keyup.enter="submit" />
<hr>
<input @keyup.page-down="onPageDown" />
<hr>
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + 点击 -->
<div @click.alt="doSomething">Do something</div>


</template>ßßß
<style scoped>

</style>